<template>
  <div class="modal-wrapper" v-if="visible">
    <div class="modal">
      <slot></slot>
    </div>
    <footer>
      <button @click="change">取消</button>
      <button>确定</button>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
const { visible } = toRefs(
  defineProps({
    visible: {
      default: false,
    },
  })
);
const emit = defineEmits(["change"]);
defineExpose({});
const change = () => {
  emit("update:visible", !visible.value);
};
</script>

<style scoped lang="scss">
.model-wrapper {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>